调试神器 vscode |
您所在的位置:网站首页 › js 代码调试 › 调试神器 vscode |
1. 前言
想必各位年轻人,都看过idea,visual studio 上刁炸天的调试机制,像这样: 当然你可以实时的计算某一个值,或者监视某一个值: 又或者像visual studio不仅像idea那样可以调试,监视,还可以在调试时,更改某一个值: 更改前 双击更改后 查看输出: 是不是特别吊炸天,这样不就一次调试,可以尝试多次值,而且,更吊的是,还能拖回到之前的代码执行: 回拖 可以看到输出了两次123: 作为一名年轻的程序员,表示非常狂酷炫拽。当然,这是在visual studio上,作为一名前端,当然也想在vscode上干这种事情。所以,接下来隆重介绍vscode-js-debug。 2. vscode-js-debug当然它的前身 debugger for chrome ,大家肯定也用过,只不过已经要停止维护了: 现在,让我们开始使用这款神器。当然使用也非常简单,以使用webpack的react 17为例,在启动项目后,选择启动调试: 当然在启动调试之前,要将端口改为项目运行端口: 然后打入断点,刷新浏览器,就可以看到停到了我们的断点处: 当然,我们也可以监视某一个值。选中变量a,右键,然后添加到监视: 可以看到左侧监视面板,出现监视值: 当我们使用调试控制台,更改这个值,输入a=1,回车: 可以看到监视面板中a的值发生更改: 这样,就可以在vscode中使用类似idea或者visual studio类似的功能了。 3 .总结 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |